<template>
    <div>
        <el-container>
            <el-header>
                <div style="display: flex;justify-content: flex-start;">
                    <el-button type="text">推广列表</el-button>
                </div>
            </el-header>
            <el-main>
                <!-- 商品表格展示 -->
                <el-table ref="multipleTable" :data="goodsList" height="500" tooltip-effect="dark" style="width: 100%">
                    <el-table-column>
                        <template slot-scope="scope">
                            <el-image style="width: 100px; height: 100px"
                                :src="'http://localhost:8092/' + scope.row.picture">
                            </el-image>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="客户名">
                    </el-table-column>
                    <el-table-column prop="goodsName" label="商品名">
                    </el-table-column>
                    <el-table-column prop="goodsNumber" label="商品编号">
                    </el-table-column>
                    <el-table-column prop="pullTime" label="日期">
                        <!-- <template slot-scope="scope">{{ scope.row.time}}</template> -->
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button size="mini" type="danger"
                            @click="handleDelete(scope.$index, scope.row.id)" v-if="role === 'manager' || (sid === '6' &&  (end === 'm' || end === 'w') )">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="block">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper" :total="total">
                    </el-pagination>
                </div>
            </el-main>
        </el-container>
    </div>
</template>
<script>
export default {
    data() {
        return {
            currentPage: 1,//当前页
            pageSize: 10,//每页大小
            totalPage: 1,//总页数
            total: 1,
            goodsList: [],
            //user信息
            userAll:{},
            role:"",
            sid:"",
            end:"",
        }
    },
    mounted: function () {
        this.pullFindAll()
        //根据用户名获取所有用户信息
       this.$axios.get("/user/findUserByAccount/" + window.localStorage.getItem("account")).then(res => {
            console.log("用户信息");
        console.log(res.data);
        this.userAll = res.data.data;
        this.role = res.data.data.roleList[0].name;
        console.log(this.role);
        this.sid = res.data.data.sid
        console.log(this.sid);
        let a = this.role.length
        this.end = this.role.substring(a-1,a)
        console.log(this.end);
      });
    },
    methods:{
        pullFindAll:function(){
            let a = {
            currentPage: this.currentPage,
            size: this.pageSize
        }
        // 发送请求查正常状态的商品
        this.$axios.post("pull/pullFindAll", a).then(res => {
            console.log("推送");
            console.log(res.data);
            // 保存菜单
            this.goodsList = res.data.data.records
            this.currentPage = res.data.data.current
            this.pageSize = res.data.data.size
            this.total = res.data.data.total
            this.totalPage = res.data.data.pages
        })
        },
        //删除
        handleDelete:function(index,id){
            this.$axios.get("pull/pullDeleteById/" + id ).then(res => {
                if(res.data.data == true){
                    this.goodsList.splice(index,1)
                }
            })
        },
        //改变每页大小
        handleSizeChange(val) {
            this.pageSize = val
            this.pullFindAll()

        },
        //改变当前页
        handleCurrentChange(val) {
            this.currentPage = val
            this.pullFindAll()
        },
    }

}
</script>
<style scoped>
.el-header {
    margin-top: 10px;
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 20%;
}

.el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 80%;
}
</style>